<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			list-style: none;
		}
		ul{
			width: 606px;
			height: 606px;
			margin: 0 auto;
			/*background: red url() 0 0 no-repeat;*/
		}
		li{
			width: 200px;
			height: 200px;
			float: left;
			font-size: 50px;
			border: 1px solid #000;
			color: #000;
			line-height: 200px;
			text-align: center;

		}
	</style>
	<script type="text/javascript">
		window.onload = function () {
			// 捉元素
			start = document.getElementById('start')

			runs = document.getElementsByClassName('run');

			cn = 500;
			// 点击开始按钮
			start.onclick = function () {
				if(start.innerHTML=="开始"){

					time = setTimeout(run,cn)
					start.innerHTML="停止";

				}else{
					cn =500;
					start.innerHTML="开始";
					clearInterval(time);
				}
			}

			num = 0;

			arr = [0,1,2,4,7,6,5,3];
			// 循环跑
			function run() {

				for (var i = 0; i < runs.length; i++) {
					runs[i].style.background = "#fff";
					runs[i].style.color = "#000";
				}

				console.log(num);
				console.log(arr[num]);

				runs[arr[num]].style.background = "red";
				runs[arr[num]].style.color = "#fff";

				if(num==runs.length-1){
					num = 0;
				}else{
					num++;
				}

				if(cn==100){
					cn =100;
				}else{
					cn = cn-100;
				}
				
				time = setTimeout(run,cn)
			}
		}
	</script>
</head>
<body>
	<ul class="box">
		<li class="run">1</li>
		<li class="run">2</li>
		<li class="run">3</li>
		<li class="run">4</li>
		<li id= 'start'>开始</li>
		<li class="run">6</li>
		<li class="run">7</li>
		<li class="run">8</li>
		<li class="run">9</li>
	</ul>
</body>
</html>